$(function(){
    creatChinaMap('map');
    $('.back_btn').click(function(){
        creatChinaMap('map');
    })
    function creatChinaMap(id){
        var myChart = echarts.init(document.getElementById(id));
        $('.back_btn').hide();
        myChart.setOption({
            title: {
                left: 'center',
                textStyle: {
                    color: '#666'
                }
                ,top:0
            },
            tooltip: {
                trigger: ''
            },
            series: [
                {
                    name: '产品分布',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:[
                        {"name": "北京","value":2656 },
                        {"name": "天津","value":2342 },
                        {"name": "上海","value":3523 },
                        {"name": "重庆","value":423 },
                        {"name": "河北","value":2 },
                        {"name": "河南","value":323 },
                        {"name": "云南","value":54 },
                        {"name": "辽宁","value":42 },
                        {"name": "黑龙江","value":6464 },
                        {"name": "湖南","value":4242 },
                        {"name": "安徽","value":42 },
                        {"name": "山东","value":532 },
                        {"name": "新疆","value":455 },
                        {"name": "江苏","value":4635 },
                        {"name": "浙江","value":7534 },
                        {"name": "江西","value":243 },
                        {"name": "湖北","value":6345 },
                        {"name": "广西","value":432 },
                        {"name": "甘肃","value":45234 },
                        {"name": "山西","value":4234 },
                        {"name": "内蒙古","value":42 },
                        {"name": "陕西","value":4324 },
                        {"name": "吉林","value":432 },
                        {"name": "福建","value":4324 },
                        {"name": "贵州","value": 43},
                        {"name": "广东","value":4324 },
                        {"name": "青海","value":434 },
                        {"name": "西藏","value":7567 },
                        {"name": "四川","value":7657 },
                        {"name": "宁夏","value":75 },
                        {"name": "海南","value":3213 },
                        {"name": "台湾","value":5634 },
                        {"name": "香港","value":342 },
                        {"name": "澳门","value":97 }
                    ],
                    itemStyle: {
                        normal: {
                            borderColor: '#ccc',
                            areaColor: '#ffffff'
                        },
                        emphasis: {
                            areaColor: '#ccc',
                            color:'#fff',
                            borderWidth: 0,
                            show:false,
                        }
                    },
                }
            ]
        });
        myChart.on('click',function(parm){
            console.log(parm)
            console.info(parm.name+'---'+parm.value)
            $('.box').find('h3').html(parm.name);
            $('.box').find('p').html(parm.name+'你大爷的');
            $('.box').find('span').html(parm.value);
            creatProvince(parm.name,id)
        })
    }

    function creatProvince(name,id){
        var pro = pyChinese(name);
        if(pro==''){
            return false;
        }
        $('.back_btn').show();
        var childChart = echarts.init(document.getElementById(id));
        var seriesdata = [{
            type: 'map',
            mapType: pro,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[],
            itemStyle: {
                normal: {
                    borderColor: '#ccc',
                    areaColor: '#ffffff'
                },
                emphasis: {
                    areaColor: '#ccc',
                    color:'#fff',
                    borderWidth: 0,
                    show:false,
                }
            },
            animation: false
        }];
        var option = {
            title: {
                text: name,
                left: 'center',
                textStyle: {
                    color: '#000'
                }
                ,top:0
            },
            series: seriesdata
        };
        $.get('json/'+pro+'.json', function(gdMap) {
            echarts.registerMap(pro, gdMap);
            childChart.setOption(option, true);

        });
    }
})